<template>
  <div class="container">
    <header-nav></header-nav>
    <div class="content mindWidth">
      <h4 class="company-name">{{ companyName }}</h4>
      <div class="label-list flex space-around items-middle">
        <div
          class="item"
          :class="currentType === 1 ? 'active' : ''"
          @click="checkPatentType(1,'')"
        >全部专利{{patentType.patenTotal}}个</div>
        <div
          class="item"
          :class="currentType === 2 ? 'active' : ''"
          @click="checkPatentType(2,'发明授权')"
        >发明专利{{patentType.inventionPatentTotal}}个</div>
        <div
          class="item"
          :class="currentType === 3 ? 'active' : ''"
          @click="checkPatentType(3,'实用新型')"
        >实用新型{{patentType.practicalNewTypeTotal}}个</div>
        <div
          class="item"
          :class="currentType === 4 ? 'active' : ''"
          @click="checkPatentType(4,'外观设计')"
        >外观专利{{patentType.exteriorPatentTotal}}个</div>
      </div>
      <div class="fun-btn flex items-middle flex-end">
        <div class="btn">
          <el-button type="primary" @click="toPayment">缴费</el-button>
        </div>
        <div class="btn">
          <el-select
            v-model="form.month"
            @change="getMonth"
            placeholder="请选择"
            style="width: 150px"
            clearable
          >
            <el-option
              v-for="item in monthArr"
              :key="item.id"
              :label="item.label"
              :value="item.id"
            />
          </el-select>
        </div>
        <div class="btn">
          <el-button @click="toExport">excel导出</el-button>
        </div>
      </div>
      <div class="content-list">
        <el-table
          ref="table"
          :data="paymentList"
          :header-cell-style="{'text-align':'center'}"
          :cell-style="{'text-align':'center'}"
          borderstyle="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" />
          <el-table-column prop="patentName" min-width="200px" label="名称">
            <template slot-scope="{row}">
              <span @click="toDetail(row.announcementNumber)">{{row.patentName}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="patentType" label="类型" />
          <el-table-column prop="applicationTime" label="申请日期" />
          <el-table-column prop="patentStatus" label="状态" />
          <el-table-column prop="shouldPaymentAmount" label="应缴金额" />
          <el-table-column prop="serviceCharge" label="服务费" />
          <el-table-column prop="lumpSum" label="总金额" />
          <el-table-column prop="surplusTime" label="剩余时间" />
          <el-table-column prop="payCloseTime" label="缴费截止日" />
          <el-table-column label="操作">
            <template slot-scope="{row}">
              <el-button size="small" type="primary" @click="toCost(row.announcementNumber)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="pageList">
        <div class="page">
          <paging ref="paging_zi" @CurrentPage="accept_CurrentValue" />
        </div>
      </div>
    </div>
    <navigation></navigation>
    <footer-nav></footer-nav>
    <Detail ref="detail"></Detail>
    <Cost ref="cost" @payment="payment"></Cost>
    <login-dialog ref="login" @reload="reload"></login-dialog>
  </div>
</template>
<script>
import paging from "@/components/paging.vue";
import {
  getCompanyPatentPaymentList,
  getCompanyPatentPayInfo,
  downloadExcel
} from "../../api/api.js";
import Detail from "./component/Detail.vue";
import Cost from "./component/Cost.vue";
import loginDialog from "../../components/login_item/LoginDialog.vue"; //登录弹窗
export default {
  components: {
    paging,
    Detail,
    Cost,
    loginDialog
  },
  data() {
    return {
      paymentList: [],
      patentType: {},
      currentType: 1,
      typeName: "",
      monthArr: [
        {
          id: "",
          label: "全部"
        },
        {
          id: "1",
          label: "一个月内缴费"
        },
        {
          id: "2",
          label: "两个月内缴费"
        }
      ],
      form: {
        pageNo: 1,
        pageSize: 10,
        patentType: "",
        month: "",
        companyId: this.$route.query.id
      },
      companyName: this.$route.query.name,
      multipleSelection: [],
      applicationNumbers: ""
    };
  },
  mounted() {
    this.getPaymentList();
    this.getPatentType();
  },
  methods: {
    reload() {
      location.reload();
    },
    // 表格全选
    handleSelectionChange(val) {
      this.multipleSelection = val;
      let arr = [];
      this.multipleSelection.forEach(item => {
        arr.push(item.announcementNumber);
      });
      this.applicationNumbers = arr.join(",");
      console.log(this.applicationNumbers);
    },
    accept_CurrentValue(value) {
      this.form.pageNo = value;
      this.getPaymentList();
    },
    getMonth() {
      this.getPaymentList();
    },
    // 专利列表
    getPaymentList() {
      getCompanyPatentPaymentList(this.form).then(res => {
        // console.log(res)
        this.paymentList = res.records;
        this.$refs.paging_zi.totalValue(res.total);
      });
    },
    // 专利类型
    getPatentType() {
      getCompanyPatentPayInfo({ companyName: this.companyName }).then(res => {
        this.patentType = res;
      });
    },
    // 专利切换
    checkPatentType(value, type) {
      this.currentType = value;
      this.form.patentType = type;
      this.form.pageNo = 1;
      this.getPaymentList();
    },
    toPayment() {
      let token = localStorage.getItem("saasToken");
      if (!token) {
        this.$refs.login.open();
      } else {
        if (!this.multipleSelection.length) {
          this.$message({
            message: "请先选择需要缴费的专利！",
            type: "warning"
          });
        } else {
          let routeData = this.$router.resolve({
            path: "/patentPayment",
            query: { num: this.applicationNumbers }
          });
          window.open(routeData.href, "_blank");
        }
      }
    },
    payment(num) {
      let token = localStorage.getItem("saasToken");
      if (!token) {
        this.$refs.login.open();
      } else {
        let routeData = this.$router.resolve({
          path: "/patentPayment",
          query: { num: num }
        });
        window.open(routeData.href, "_blank");
      }
    },
    // 专利详情
    toDetail(id) {
      this.$refs.detail.open(id, this.form.companyId);
    },
    toCost(id) {
      this.$refs.cost.open(id);
    },
    // 导出
    toExport() {
      let params = {
        companyId: this.form.companyId,
        month: this.form.month,
        patentType: this.form.patentType
      };
      downloadExcel(params).then(res => {
        let blob = new Blob([res.data]);
        let link = document.createElement("a");
        let fileName = "专利名单.xls";
        link.href = window.URL.createObjectURL(blob);
        link.download = decodeURIComponent(fileName);
        link.click();
      });
    }
  }
};
</script>
<style lang="less" scoped>
.container {
  .content {
    background: #fff;
    box-sizing: border-box;
    padding: 20px 30px;
    box-shadow: 0 0 10px #ccc;
    margin: 40px auto;
    min-height: 550px;
    .label-list {
      margin-top: 30px;
      margin-bottom: 10px;
      .item {
        width: 23%;
        text-align: center;
        background: #ccc;
        padding: 10px 0;
        box-sizing: border-box;
        border-radius: 10px;
        color: #fff;
      }
      .active {
        background: #1678ff;
      }
    }
    .fun-btn {
      width: 100%;
      padding: 15px 0;
      box-sizing: border-box;
      .btn {
        margin-left: 15px;
      }
    }
    .content-list {
      span {
        color: #1678ff;
      }
    }
    /* 这里是分页 */
    .pageList {
      height: 100px;
      display: flex;
      flex-direction: row-reverse;
    }
    .page {
      display: flex;
      float: right;
      align-items: center;
      .pageNum {
        font-size: 14px;
        margin-right: 20px;

        span {
          color: #44a2ff;
          margin: 0 5px;
        }
      }
      .tempPage {
        margin-left: 10px;
        input {
          margin: 0 5px;
          text-align: center;
          width: 30px;
          height: 30px;
          border: 1px solid #ccc;
        }
      }
    }
  }
}
</style>